<template>
	<el-card body-style="{ padding: '0px' }">
	<el-header  height="50px" >
		<el-menu
		  :default-active="activeIndex"
		  router
		  class="el-menu-demo"
		  mode="horizontal"
		  @select="handleSelect"
		  background-color="#545c64"
		  text-color="#fff"
		  active-text-color="#ffd04b"
		  >
		  <el-menu-item index="1" class="el-icon-s-home"  @click="$router.push('/')">首页</el-menu-item>
		  <el-menu-item index="2" @click="$router.push('/Add')">添加表单</el-menu-item>
		  <el-menu-item index="3" @click="$router.push('FormList')">查看表单</el-menu-item>
		  <el-menu-item index="4" @click="$router.push('/CollectList')">收藏表单</el-menu-item>
		</el-menu> 
	</el-header>
	<div>
	 <el-divider></el-divider>
	 <h1>{{ msg }}</h1>
	  <el-divider></el-divider>
	  </div>
 <!-- //该div是循环卡片列表  -->  
<div style="margin-left:1%;margin-right:1%">        
	<el-row>            
		<el-col :span="3" v-for="(item) in FormList" :key="item.FormList" :offset="1" >                
		<div style="margin-top:15px">                    
			<el-card :body-style="{ padding: '0px'}" shadow="hover">                    
			<img src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg"  class="image">                    
			<div>                    
			<span>{{item.headline}}</span>
			<div class="bottom clearfix">
				<el-button type="text" @click="onCollection(item.formId)" class="button" >取消收藏</el-button>
				<el-button type="text" @click="handleSee(item.formId),dialogFormVisible = true" class="button" >查看</el-button>
				<el-dialog title="查看" :visible.sync="dialogFormVisible">
				         	    <!-- <div>
				         	    	<span style="width: 500px;" name="title" type="text" class="form-control" >{{list.headline}}</span>
				         	    </div> -->
				         	    <div v-show="list.length != 0">
				         	    	<div class="well-box mt-1 text-left" :class="'questionnaire_'+index" v-for="(item, index) in list" :key="index">
				         	    		
				         	    		<div class="flex-row">
				         	    			<div style="width: 50px;padding:5px 10px;font-size: 14px">
				         	    				{{ index + 1 }}
				         	    			</div>
				         	    			<div class="flex-1">
				         	    				<span>{{item.questionContent}}</span>
				         	    				<div>
				         	    					<!-- 判断为单选题型 -->
				         	    					<div v-if="'singleChoice' == item.type" v-for="(optionsItem,i) in item.options" :key="i">
				         	    						<input type="radio" :name='"optionschoice["+index+"]"':value="item.options[i].optionContent" @click="getRadioVal(item.options[i].optionContent,item.type,item.sort)" />
				         	    						<span>{{item.options[i].optionContent}}</span>
				         	    					</div>
				         	    					<!-- 判断为单选题型 end -->
				         	    
				         	    					<!-- 判断为多选题型 -->
				         	    					<div v-if="'mutipleChoice' == item.type" v-for="(optionsItem,i) in item.options" :key="i">
				         	    						<input type="checkbox" name="options" :value="item.options[i].optionContent" @click="getRadioVal(item.options[i].optionContent,item.type,item.sort)" />
				         	    						<span>{{item.options[i].optionContent}}</span>
				         	    					</div>
				         	    					<!-- 判断为多选题型 end -->
				         	    
				         	    					<!-- 判断为简答题型 -->
				         	    					<div v-if="'scoring' == item.type" v-for="(optionsItem,i) in item.options" :key="i">
				         	    						<el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="item.options[i].optionContent"/>
				         	    					</div>
				         	    			    </div>
				         	    		    </div>
				         	    		</div>
				         	    	</div>
				         	    </div>
								<el-divider></el-divider>
				         	  <div slot="footer" class="dialog-footer">
				         	    <el-button @click="dialogFormVisible = false">取 消</el-button>
				         	    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
				         	  </div>
				         	</el-dialog>
			</div>
			</div>                
			</el-card>    
		</div>	
		</el-col>
		</el-row>  
		</div>
</el-card>
</template>

<script>
	export default {
		created() {
			this.collectformList()
		},
		inject:['reload'],
		data() {
			return {
				list: [],
				dialogFormVisible: false,
				//循环卡片列表的数据源     
				reset:false,   
				Form: {
					headline: '',
					formId:'',
					sList: [],
				},
				FormList:{},
				 currentDate: new Date(),
				 msg: '这里是你收藏的所有表单哦！',
				activeIndex: '4',
				}
			},
		methods: {
			/* watch:{      
			FormList:function(){          
				this.$nextTick(function(){          
				现在数据已经渲染完毕        
				console.log(this.FormList);          
				this.reset=true;        
				})      
			}  
			}, */
			async onCollection(formId){
				if(formId==""){
					this.$alert("请选择要取消收藏的表单!");
				}
				else if(formId!=null){
				console.log(formId);
				const {date:res}=await this.$http.get('collectForm?id=' + formId)
				this.$message.success('取消收藏表单成功!')
				this.reload();
				}
				},
				
			handleSelect(key, keyPath) {
			        console.log(key, keyPath);
			      },
				  async collectformList() {
				  	const {
				  		data: res
				  	} = await this.$http.get('collectedForm', this.FormList)
				  	//console.log(this.FormList)
				  	//console.log(res)
				  	this.FormList = res;
					console.log(this.FormList);
					this.Form=this.FormList;
				  	//console.log(this.FormList[0].headline);						  
				  },
				  async handleSee(formId) {
				  	console.log(formId);
				  	const {
				  		data: res
				  	} = await this.$http.get('getFormById?id=' + formId)
				  	this.Form = res;
				  	//console.log(this.Form);
				  	for (let i = 0; i < res.sList.length; i++) {
				  		//console.log(res.sList[i].type);
				  		this.addQuestionnaire(res.sList[i].type)
				  		//console.log(res.sList[i].type);
				  	}
				  	this.list=this.Form.sList;
					},
					addQuestionnaire(type, index, operation) {
						// 添加单选题
						if (type == 'singleChoice') {
							var singleChoice = {
								questionContent:'',
								
								options: [{
									optionContent:'选项1'
								}],
								type: 'singleChoice',
								sort: this.list.length + 1
							}
							// 在当前题下方添加
							if (index != undefined && undefined == operation) {
								this.list.splice(index + 1, 0, singleChoice)
							}
							// 复制题型
							else if (index != undefined && 'copy' == operation) {
								var copyChoice = {
									questionContent: this.list[index].questionContent,
									options: this.list[index].options.slice(0),
									type: type,
									sort: this.list.length + 1
								}
								this.list.splice(index + 1, 0, copyChoice)
							} else {
								this.list.push(singleChoice)
							}
						}
						//添加单选题 end
						// 添加多选题
						else if (type == 'mutipleChoice') {
							var mutipleChoice = {
								questionContent: '',
								options: [{
									optionContent: "选项1"
								}, {
									optionContent: "选项2"
								}],
								type: 'mutipleChoice',
								sort: this.list.length + 1
							}
							// 在当前题下方添加
							if (index != undefined && undefined == operation) {
								this.list.splice(index + 1, 0, mutipleChoice)
							}
							// 复制题型
							else if (index != undefined && 'copy' == operation) {
								var copyChoice = {
									questionContent: this.list[index].questionContent,
									options: this.list[index].options.slice(0),
									type: type,
									sort: this.list.length + 1
								}
								this.list.splice(index + 1, 0, copyChoice)
							} else {
								this.list.push(mutipleChoice)
							}
						}
						// 添加多选题 end
					
						// 添加简答题
						else if (type == 'scoring') {
							var scoring = {
								questionContent: '',
								options: [{
									optionContent: ""
								}],
								type: 'scoring',
								sort: this.list.length + 1
							}
					
							// 在当前题下方添加
							if (index != undefined && undefined == operation) {
								this.list.splice(index + 1, 0, scoring)
							}
							// 复制题型
							else if (index != undefined && 'copy' == operation) {
								var copyChoice = {
									questionContent: this.list[index].questionContent,
									options: '',
									type: type,
									sort: this.list.length + 1
								}
								this.list.splice(index + 1, 0, copyChoice)
							} else {
								this.list.push(scoring)
							}
						}
					
						// 添加简答题 end
					
					},
		}
	}
</script>

<style>
	h1, h2 {
		 color: #00557f;
		 font-size: 2.0rem;
	  font-weight: normal;
	}
	.el-card__body {
	    padding: 0px;
	}
	.el-header {
	    background-color: #a9a9be;
	    color: #333;
	    line-height: 50px;
		padding:0;
	  }
	.pathItem {
		float: left; 
		font-size: 1.3rem;
		list-style:none;
		margin:5px 5px;
		cursor: pointer;
	}
	h1, h2 {
		 /* color: #00557f; */
		 font-size: 1.3rem;
	  font-weight: normal; 
	}
	 .time {
	    font-size: 13px;
	    color: #999;
	  }
	  
	  .bottom {
	    margin-top: 13px;
	    line-height: 12px;
	  }
	
	  .button {
	    padding: 0;
	    float: right;
	  }
	
	  .image {
	    width: 100%;
	    display: block;
	  }
	
	  .clearfix:before,
	  .clearfix:after {
	      display: table;
	      content: "";
	  }
	  
	  .clearfix:after {
	      clear: both
	  }
</style>
